/**
 * Created by suweiming on 2017/12/30.
 */
import React from 'react';
import {Platform} from 'react-native';
import {SafeAreaView, StackNavigator} from 'react-navigation';
import {
    Container,
    Header,
    Button,
    Body,
    Left,
    DataTips,
    validateForm,
    getMergeFormData,
    fnFail,
    fnSuccess, Title,
    Content,
    StyleSheet, Icon,
    Text, Image, View, Right,
    Fom, Loading
} from '../../lib/components';
import Info from './info.js';

class Banner extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        const self = this;
        return <SafeAreaView
            style={styles.bannerContainer}
            forceInset={{top: 'always'}}
        >
            <View
                style={styles.banner}>
                <Button
                    transparent
                    onPress={() => {
                        self.props.click&&self.props.click();
                    }}
                >
                    <Image
                        source={require('../../assets/NavLogo.png')}
                        style={styles.image}

                    />
                </Button>
                <Text style={styles.title}>苏伟明</Text>
            </View>
        </SafeAreaView>
    }
}
/**
 * 驾驶司机
 */
class User extends React.Component {

    constructor(props) {
        super(props);
        this.state = {data: [], loading: true,};
    }

    componentDidMount() {
    }

    render() {
        const self = this;
        return <Container>
            <Header
                hasTabs
                style={{
                    backgroundColor: '#673ab7',
                }}
            >
                <Left>
                    {/*<Button transparent onPress={() => {*/}
                    {/*}}>*/}
                        {/*<Icon*/}
                            {/*size={24}*/}
                            {/*style={{color: '#FFF'}}*/}
                            {/*name="ios-arrow-back"/>*/}
                    {/*</Button>*/}
                </Left>
                <Body>
                <Title style={{color: '#FFF'}}>我的</Title>
                </Body>
                <Right>
                    <Button transparent
                            onPress={() => this.props.navigation.navigate('Msg')}
                    >
                        {/*<Icon*/}
                        {/*size={24}*/}
                        {/*style={{color:'#FFF'}}*/}
                        {/*name="ios-search"/>*/}
                        <Icon
                            size={24}
                            style={{color: '#FFF'}}
                            name="ios-mail-outline"/>
                    </Button>
                    <Button transparent><Icon
                        size={24}
                        style={{color: '#FFF'}}
                        name="ios-heart-outline"/></Button>
                    <Button transparent><Icon
                        size={24}
                        style={{color: '#FFF'}}
                        name="ios-more-outline"/></Button>
                </Right>
            </Header>
            <Banner click={() => {
                self.props.navigation.navigate('Info');
            }}/>
            <DataTips>用户中心</DataTips>
        </Container>
    }
}
;

const AppNavigator = StackNavigator(
    {
        User: {
            screen: User,
        },
        Info: {
            screen: Info,
        },
    },
    {
        initialRouteName: 'User',
        headerMode: 'none',

        /*
         * Use modal on iOS because the card mode comes from the right,
         * which conflicts with the drawer example gesture
         */
        mode: Platform.OS === 'ios' ? 'modal' : 'card',
    }
);
export default AppNavigator;
const styles = StyleSheet.create({
    bannerContainer: {
        backgroundColor: '#673ab7',
        paddingTop: 20,
        borderWidth: 0
    },
    banner: {
        flexDirection: 'row',
        alignItems: 'center',
        padding: 16, borderWidth: 0
    },
    image: {
        width: 36,
        height: 36,
        resizeMode: 'contain',
        tintColor: '#fff',
        margin: 8,
    },
    title: {
        fontSize: 18,
        fontWeight: '200',
        color: '#fff',
        margin: 8,
    },
});
